<<template>
  <div class="login">

    <el-card class="login-card" v-show="sta == false">
      <h1>社区综合治理管理系统</h1>
      <h2>登录</h2>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px">
        <el-form-item label="账号" prop="zhanghao">
          <el-input v-model="loginForm.zhanghao"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="loginForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-link :underline="false" @click="sta = true">还没账号？点我注册</el-link>
        </el-form-item>
      </el-form>
    </el-card>



    <el-card class="login-card" v-show="sta == true">
      <h1>社区综合治理管理系统</h1>
      <h2>注册</h2>
      <el-form ref="zhuceForm" :model="zhuceForm" :rules="zhuceRules" label-width="80px">
        <el-form-item label="账号" prop="zhanghao">
          <el-input v-model="zhuceForm.zhanghao" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="zhuceForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="zhuceForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="zhanghao">
          <el-select v-model="zhuceForm.xueli" placeholder="请选择学历">
            <el-option v-for="education in educations" :key="education" :label="education"
              :value="education"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="民族" prop="minzu">
          <el-select v-model="zhuceForm.minzu" placeholder="请选择民族">
            <el-option v-for="nationality in nationalities" :key="nationality" :label="nationality"
              :value="nationality"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="角色" prop="roleid">
          <el-select v-model="zhuceForm.roleid">
            <el-option label="请选择" value=""></el-option>
            <el-option v-for="item in rolelist" :key="item._id" :label="item.name" :value="item._id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-link :underline="false" @click="sta = false">注册完了赶紧登录</el-link>
          <el-button type="primary" @click="zhuce('zhuceForm')">注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <Yzm ref="parent" :dialogChild.sync="isShowSlide" @login=login />
  </div>
</template>
  <script>
  import Yzm from "@/views/yzm.vue";

  export default {
    components: {
      Yzm,
    },
    data() {
      return {
        sta: false,
        yzmsta: false,
        isShowSlide: false,
        loginForm: {
          zhanghao: '',
          password: '',
        },
        zhuceForm: {
          zhanghao: '',
          name: '',
          phone: '',
          password: '123456',
          xueli: '',
          minzu: '',
          data: '2023-12-15',
          roleid: '65f8ef143639fe39f45003a4',
        },
        loginRules: {
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          zhanghao: [{ required: true, message: '请输入账号', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],
        },
        zhuceRules: {
          name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          zhanghao: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }],
          minzu: [{ required: true, message: '请选择民族', trigger: 'change' }],
        },
        rolelist: [],
        nationalities: [
          "汉族", "壮族", "满族", "回族", "苗族", "维吾尔族", "土家族", "彝族",
          "蒙古族", "藏族", "布依族", "侗族", "瑶族", "朝鲜族", "白族", "哈尼族",
          "哈萨克族", "黎族", "傣族", "畲族", "傈僳族", "仡佬族", "东乡族", "高山族",
          "拉祜族", "水族", "佤族", "纳西族", "羌族", "土族", "仫佬族", "锡伯族",
          "柯尔克孜族", "达斡尔族", "景颇族", "毛南族", "撒拉族", "布朗族", "塔吉克族",
          "阿昌族", "普米族", "鄂温克族", "怒族", "京族", "基诺族", "德昂族", "保安族",
          "俄罗斯族", "裕固族", "乌孜别克族", "门巴族", "鄂伦春族", "独龙族", "塔塔尔族", "赫哲族", "珞巴族"
        ],
        educations: [
          "小学", "初中", "高中", "大专", "大学本科", "硕士", "博士"
        ],
      }
    },
    methods: {
      async login(val) {
        this.isShowSlide = true;
        // 每次点击都触发一下重置验证组件的方法
        this.$refs.parent.handleClick();
        if (val && typeof (val) !== 'object') {
          let { data } = await this.axios.post('/login', this.loginForm)
          console.log(data);
          if (data.code === 200) {
            this.$message.success('登录成功')
            sessionStorage.setItem('list', JSON.stringify(data.list))
            sessionStorage.setItem("token", data.token);
            this.$router.push('/welcome')
          } else {
            this.isShowSlide = false;
            this.$message.error('该用户信息有误，请验证后重新输入')
          }
        } else {
          this.$message.error('请先进行滑块验证')
        }
      },
      async getrole() {
        let { data } = await this.axios.get('/rolelist')
        this.rolelist = data.rolelist
      },
      async zhuce() {
        let { data } = await this.axios.post('/adduser', this.zhuceForm)
        if (data.code === 200) {
          this.$message.success('注册成功')
        } else {
          this.$message.success('出错了')
        }
      },
      // verifyOn() {
      //   this.isShowSlide = true;
      //   // 每次点击都触发一下重置验证组件的方法
      //   this.$refs.parent.handleClick();
      // },
    },
    mounted() {
      this.getrole()
    },
  };
</script>

  <style>
  .login {
    display: flex;
    justify-content: right;
    /* align-items: center; */
    height: 100vh;
    width: 100vw;
    height: 100vh;
    background-image: url('../assets/阿弥诺斯小区门口.jpg');
    background-size: cover;
  }

  .login-card {
    width: 400px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.6);
    /* 设置背景颜色及透明度 */
    padding: 20px;
  }
</style>>